<template>
  <div>
    <MediumOutlined style="color: #0f5be8"/>
    <span class="markdown" @click="showModal">支持Markdown语法</span>

    <a-modal :visible="visible" title="Markdown 语法速查" @cancel="handleCancel" width="720px">
      <div class="dialog-tips">
        <ExclamationCircleFilled/>
        评论及留言的内容不支持1-5级标题。
      </div>
      <v-md-preview class="preview-c" :text="text"></v-md-preview>
      <template #footer>
        <a-button key="submit" type="primary" @click="handleCancel">关 闭</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import {defineComponent, ref} from 'vue';
import '@kangc/v-md-editor/lib/theme/style/github.css';

const visible = ref<boolean>(false);
const text = ref<string>(`
<table  class="mcs-table">
<thead>
<tr>
<th>元素</th>
<th>Markdown 语法</th>
<th >效果</th></tr>
</thead>
<tbody >
<tr >
<td >标题</td>
 <td >
 <br># 1级标题
 <br>## 2级标题
 <br>### 3级标题
 <br>#### 4级标题
 <br>##### 5级标题
</td>
<td >
<div >
<div class="tui-editor-contents">
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
</div>
</div>
</td>
</tr>
<tr >
<td >加粗</td>
<td >**加粗文本**</td>
<td >
<p><strong>加粗文本</strong></p>
</td>
</tr>
<tr >
<td >斜体</td>
<td >*斜体文本*</td>
<td >
<div >
<div class="tui-editor-contents"><p><em>斜体文本</em></p></div>
</div>
</td>
</tr>
<tr >
<td >删除</td>
<td >~~已删除文本~~</td>
<td >
<div ><div class="tui-editor-contents"><p><del>已删除文本</del></p></div></div>
</td>
</tr>
<tr >
<td >引用</td>
<td >&gt; 引用内容</td>
<td >
<div ><div class="tui-editor-contents"><blockquote><p>引用内容</p></blockquote></div></div>
</td>
</tr>
<tr >
<td >有序列表</td>
<td >
1. 第一项
<br>2. 第二项
<br>3. 第三项
<br>
</td>
<td >
<div >
<div class="tui-editor-contents"><ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li></ol>
</div>
</div>
</td>
</tr>
<tr >
<td >无序列表</td>
<td >
* 第一项
<br>* 第二项
<br>* 第三项
<br>
</td>
<td ><div ><div class="tui-editor-contents"><ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
</div></div></td>
</tr>
 <tr ><td >任务列表</td>
 <td >
  * [x] 已完成
  <br>* [ ] 未完成1
  <br>* [ ] 未完成2
</td>
<td >
<div >
<div class="github-markdown-body">
<ul class="v-md-editor__todo-list" data-v-md-line="1">
<li class="v-md-editor__todo-list-item"><span class="v-md-editor__todo-list-checkbox v-md-editor__todo-list-checkbox--checked" style="border-color: #3eaf7c;background-color: #3eaf7c"></span> 已完成</li>
<li class="v-md-editor__todo-list-item"><span class="v-md-editor__todo-list-checkbox" style="border-color: #d9d9d9"></span> 未完成1</li>
<li class="v-md-editor__todo-list-item"><span class="v-md-editor__todo-list-checkbox" style="border-color: #d9d9d9"></span> 未完成2</li>
</ul>
</div>
</div>
</td>
</tr>
<tr ><td >行内代码</td> <td ><code >\`code\`</code></td> <td ><div ><div class="tui-editor-contents"><p><code data-backticks="1">code</code></p>
</div></div></td></tr> <tr ><td >块级代码</td> <td ><code >\`\`\`js
<br>function foo() {
<br>&nbsp;&nbsp;const name = "iBlog";
<br>&nbsp;&nbsp;console.log(name);
<br>}
<br>\`\`\`</code></td> <td ><div ><div class="tui-editor-contents"><pre class="lang-js"><code data-language="js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">const</span> name = <span class="hljs-string">"iBlog"</span>;
  <span class="hljs-built_in">console</span>.log(name);
}
</code></pre>
</div></div></td></tr> <tr ><td >分隔线</td> <td ><code >---</code></td> <td ><div ><div class="tui-editor-contents"><hr>
</div></div></td></tr> <tr ><td >链接</td> <td ><code >[链接地址](https://www.baidu.com)</code></td> <td ><div ><div class="tui-editor-contents"><p><a href="https://www.baidu.com">链接地址</a></p>
</div></div></td></tr> <tr ><td >图片</td> <td  style="max-width: 270px;"><code >![img](https://img1.baidu.com/it/u=3040070326,2714132266&fm=253&fmt=auto&app=138&f=JPEG)</code></td> <td ><div ><div class="tui-editor-contents"><p><img src="https://img1.baidu.com/it/u=3040070326,2714132266&fm=253&fmt=auto&app=138&f=JPEG" alt="logo"></p>
</div></div></td></tr> <tr ><td >表格</td> <td >
| 框架 | 类型 |
<br>| --- | ---|
<br>| Vue.js | 前端 |
<br>| Express.js | 后端 |
</td> <td ><div ><div class="tui-editor-contents"><table>
<thead>
<tr>
<th>框架</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vue.js</td>
<td>前端</td>
</tr>
<tr>
<td>Express.js</td>
<td>后端</td>
</tr>
</tbody>
</table>
</div></div></td></tr></tbody></table>`)

const showModal = () => {
  visible.value = true;
};

const handleCancel = (e: MouseEvent) => {
  console.log(e);
  visible.value = false;
};
</script>
<style scoped>
.markdown {
  margin: 0 5px;
}

.markdown:hover {
  cursor: pointer;
  color: #0f5be8;
}

.dialog-tips {
  height: 35px;
  line-height: 35px;
  border-radius: 5px;
  background-color: #fffbe6;
  border: 1px solid #ffe58f;
  color: #888888;
}

.dialog-tips span {
  color: #efba0a;
  margin: 0 10px;
}
</style>
<style>
.github-markdown-body {
  padding: 0 !important;
  margin: 10px 0;
  /* font-size: 16px; */
  /* font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; */
  /* line-height: 1.5; */
  /* word-wrap: break-word; */
}
</style>
